/**
 * 帮助中心页面脚本
 */

document.addEventListener('DOMContentLoaded', function() {
    // 初始化侧边栏导航
    initSidebar();
    
    // 初始化手风琴组件
    initAccordion();
    
    // 初始化搜索功能
    initSearch();
    
    // 初始化视频播放
    initVideoTutorials();
    
    // 初始化反馈功能
    initFeedback();
    
    // 初始化联系表单
    initContactForm();
});

/**
 * 初始化侧边栏导航
 */
function initSidebar() {
    const navLinks = document.querySelectorAll('.help-nav-section a');
    const helpSections = document.querySelectorAll('.help-section');
    
    // 默认显示第一个部分
    if (helpSections.length > 0) {
        helpSections[0].classList.add('active');
    }
    
    if (navLinks.length > 0) {
        navLinks[0].classList.add('active');
    }
    
    // 为每个导航链接添加点击事件
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 获取目标部分的ID
            const targetId = this.getAttribute('href').substring(1);
            const targetSection = document.getElementById(targetId);
            
            // 更新面包屑
            updateBreadcrumb(this.textContent);
            
            // 移除所有活动类
            navLinks.forEach(link => link.classList.remove('active'));
            helpSections.forEach(section => section.classList.remove('active'));
            
            // 添加活动类到当前链接和目标部分
            this.classList.add('active');
            if (targetSection) {
                targetSection.classList.add('active');
                // 滚动到顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }
        });
    });
}

/**
 * 更新面包屑导航
 * @param {string} sectionName - 当前部分的名称
 */
function updateBreadcrumb(sectionName) {
    const breadcrumb = document.querySelector('.help-breadcrumb span');
    if (breadcrumb) {
        breadcrumb.textContent = sectionName;
    }
}

/**
 * 初始化手风琴组件
 */
function initAccordion() {
    const accordionItems = document.querySelectorAll('.accordion-item');
    
    // 默认打开第一个项目
    if (accordionItems.length > 0) {
        accordionItems[0].classList.add('active');
    }
    
    accordionItems.forEach(item => {
        const header = item.querySelector('.accordion-header');
        
        header.addEventListener('click', function() {
            // 切换当前项目的活动状态
            item.classList.toggle('active');
        });
    });
}

/**
 * 初始化搜索功能
 */
function initSearch() {
    const searchForm = document.querySelector('.search-box');
    const searchInput = document.querySelector('.search-input');
    
    if (searchForm && searchInput) {
        searchForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const query = searchInput.value.trim();
            if (query) {
                // 模拟搜索功能
                searchHelpContent(query);
            }
        });
        
        // 添加回车键搜索
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const query = searchInput.value.trim();
                if (query) {
                    searchHelpContent(query);
                }
            }
        });
    }
}

/**
 * 搜索帮助内容
 * @param {string} query - 搜索查询
 */
function searchHelpContent(query) {
    // 在实际应用中，这里应该发送AJAX请求到后端进行搜索
    console.log('搜索查询:', query);
    
    // 模拟搜索结果
    showToast(`正在搜索"${query}"相关内容...`);
    
    // 这里可以添加实际的搜索逻辑
    // 例如：跳转到搜索结果页面或在当前页面显示结果
}

/**
 * 初始化视频教程
 */
function initVideoTutorials() {
    const videoItems = document.querySelectorAll('.video-item');
    
    videoItems.forEach(item => {
        item.addEventListener('click', function() {
            const videoTitle = this.querySelector('h3').textContent;
            
            // 模拟视频播放
            // 在实际应用中，这里应该打开一个模态框并播放视频
            showToast(`正在播放视频: ${videoTitle}`);
            
            // 这里可以添加实际的视频播放逻辑
            // 例如：打开模态框并嵌入视频播放器
        });
    });
}

/**
 * 初始化反馈功能
 */
function initFeedback() {
    const feedbackButtons = document.querySelectorAll('.feedback-btn');
    
    feedbackButtons.forEach(button => {
        button.addEventListener('click', function() {
            const feedbackType = this.getAttribute('data-feedback');
            
            // 模拟反馈提交
            if (feedbackType === 'helpful') {
                showToast('感谢您的反馈！我们很高兴这篇文章对您有所帮助。');
            } else {
                // 显示反馈表单或模态框
                showToast('非常抱歉这篇文章没有解决您的问题。请告诉我们如何改进。');
            }
        });
    });
}

/**
 * 初始化联系表单
 */
function initContactForm() {
    const contactForm = document.querySelector('.contact-form');
    const fileUploadBtn = document.querySelector('.file-upload-btn');
    const fileInput = document.querySelector('.file-input');
    const fileName = document.querySelector('.file-name');
    
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(this);
            
            // 模拟表单提交
            showToast('您的问题已提交，我们将尽快回复您。');
            
            // 重置表单
            this.reset();
            if (fileName) {
                fileName.textContent = '';
            }
            
            // 这里可以添加实际的表单提交逻辑
            // 例如：发送AJAX请求到后端API
        });
    }
    
    // 文件上传按钮
    if (fileUploadBtn && fileInput && fileName) {
        fileUploadBtn.addEventListener('click', function() {
            fileInput.click();
        });
        
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                fileName.textContent = this.files[0].name;
            } else {
                fileName.textContent = '';
            }
        });
    }
}

/**
 * 显示提示消息
 * @param {string} message - 提示消息
 * @param {string} type - 提示类型 (success, error, warning, info)
 */
function showToast(message, type = 'info') {
    // 检查是否已存在toast容器
    let toastContainer = document.querySelector('.toast-container');
    
    // 如果不存在，创建一个
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container';
        document.body.appendChild(toastContainer);
        
        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            .toast-container {
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 9999;
            }
            .toast {
                min-width: 250px;
                margin-bottom: 10px;
                padding: 15px 20px;
                border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
                color: white;
            }
            .toast-success {
                background-color: #52c41a;
            }
            .toast-error {
                background-color: #ff4d4f;
            }
            .toast-warning {
                background-color: #faad14;
            }
            .toast-info {
                background-color: #1890ff;
            }
            .toast-close {
                cursor: pointer;
                margin-left: 10px;
                font-size: 16px;
            }
            @keyframes toast-in {
                from { transform: translateY(-20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            @keyframes toast-out {
                from { transform: translateY(0); opacity: 1; }
                to { transform: translateY(-20px); opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    }
    
    // 创建toast元素
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.innerHTML = `
        <span>${message}</span>
        <span class="toast-close">×</span>
    `;
    
    // 添加到容器
    toastContainer.appendChild(toast);
    
    // 添加关闭按钮事件
    const closeBtn = toast.querySelector('.toast-close');
    closeBtn.addEventListener('click', function() {
        toast.remove();
    });
    
    // 3秒后自动移除
    setTimeout(() => {
        toast.remove();
    }, 3000);
}